<script setup>
import { useRouter } from 'vue-router'
import {House, Lock} from '@element-plus/icons-vue'

const router = useRouter()
const goHome = () => {
  router.push('/')
}
</script>

<template>
  <div class="container">
    <div class="error-content">
      <!-- 警示图标 -->
      <el-icon class="error-icon" :size="100" color="#F56C6C">
        <Lock />
      </el-icon>

      <!-- 错误代码 -->
      <h1 class="error-code">403</h1>

      <!-- 错误信息 -->
      <div class="error-message">
        <h2 class="animate-fade">访问被拒绝</h2>
        <p>抱歉，您没有权限访问此页面<br>请联系系统管理员获取访问权限</p>
      </div>

      <!-- 操作按钮组 -->
      <div class="action-buttons">
        <el-button
            type="danger"
            @click="goHome"
            class="home-button"
            :icon="House"
        >
          返回首页
        </el-button>

        <el-button
            type="primary"
            @click="router.push('/login')"
            class="login-button"
        >
          重新登录
        </el-button>
      </div>

      <!-- 装饰性边框动画 -->
      <div class="permission-border"></div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
  padding: 2rem;
}

.error-content {
  text-align: center;
  max-width: 600px;
  position: relative;
  padding: 2rem;
}

.error-icon {
  margin-bottom: 1.5rem;
  animation: iconShake 1.5s ease-in-out infinite;
}

.error-code {
  font-size: 8rem;
  color: #F56C6C;
  margin: 0.5rem 0;
  text-shadow: 2px 2px 4px rgba(245, 108, 108, 0.2);
  opacity: 0.9;
}

.error-message {
  margin: 2rem 0;
}

.error-message h2 {
  font-size: 2rem;
  color: #F56C6C;
  margin-bottom: 1rem;
}

.error-message p {
  color: #606266;
  line-height: 1.6;
  font-size: 1.1rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.home-button {
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-button {
  padding: 1rem 2rem;
  border-radius: 8px;
  background: linear-gradient(45deg, #409EFF, #79BBFF);
  border: none;
}

.permission-border {
  position: absolute;
  inset: 0;
  border: 3px solid #F56C6C;
  border-radius: 16px;
  animation: borderPulse 2s ease-in-out infinite;
  pointer-events: none;
}

/* 图标抖动动画 */
@keyframes iconShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 边框脉冲动画 */
@keyframes borderPulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; transform: scale(1.02); }
  100% { opacity: 0.3; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-code {
    font-size: 6rem;
  }

  .error-message h2 {
    font-size: 1.75rem;
  }

  .action-buttons {
    flex-direction: column;
  }

  .error-icon {
    font-size: 80px;
  }
}
</style>